<!DOCTYPE html>
<html>


<head>
	<meta charset="UTF-8">
	<title>可输入的下拉框（允许输入非选项值）</title>
	<link rel="stylesheet" href="../../libs/layui/layui-2.4.5/dist/css/layui.css">
	<link rel="stylesheet" href="../../libs/jsTree/style.min.css">

	<script src="../../libs/jquery-easyui-1.8.5/jquery.min.js"></script>
	<script src="../../libs/layui/layui-2.4.5/dist/layui.js"></script>
	<script src="../../libs/jsTree/jstree.js"></script>
	<style>
		body{padding: 50px 100px;}

	</style>
</head>

<body >

	<ul id="demo"></ul>

	<ul id="demo1" style="margin-top: 50px;"></ul>

	<script>

		layui.use('tree', function () {
			var tree = layui.tree({
				elem: '#demo' //指定元素
				// ,check: 'checkbox' //勾选风格
				, skin: 'as' //设定皮肤
				//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
				, drag: true
				, click: function (item) { //点击节点回调
					console.log(item)
				}
				, nodes: [ //节点
					{
						name: '常用文件夹'
						, id: 1
						, alias: 'changyong'
						, children: [
							{
								name: '所有未读'
								, id: 11
								//,href: 'http://www.layui.com/'
								, alias: 'weidu'
							}, {
								name: '置顶邮件'
								, id: 12
							}, {
								name: '标签邮件'
								, id: 13
							}
						]
					}, {
						name: '我的邮箱'
						, id: 2
						, spread: true
						, children: [
							{
								name: 'QQ邮箱'
								, id: 21
								, spread: true
								, children: [
									{
										name: '收件箱'
										, id: 211
										, children: [
											{
												name: '所有未读'
												, id: 2111
											}, {
												name: '置顶邮件'
												, id: 2112
											}, {
												name: '标签邮件'
												, id: 2113
											}
										]
									}, {
										name: '已发出的邮件'
										, id: 212
									}, {
										name: '垃圾邮件'
										, id: 213
									}
								]
							}, {
								name: '阿里云邮'
								, id: 22
								, children: [
									{
										name: '收件箱'
										, id: 221
									}, {
										name: '已发出的邮件'
										, id: 222
									}, {
										name: '垃圾邮件'
										, id: 223
									}
								]
							}
						]
					}
				]
			});

			//生成一个模拟树
			var createTree = function (node, start) {
				node = node || function () {
					var arr = [];
					for (var i = 1; i < 10; i++) {
						arr.push({
							name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
						});
					}
					return arr;
				}();
				start = start || 1;
				layui.each(node, function (index, item) {
					if (start < 10 && index < 9) {
						var child = [
							{
								name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
							}
						];
						node[index].children = child;
						createTree(child, index + start + 1);
					}
				});
				return node;
			};

			layui.tree({
				elem: '#demo1' //指定元素
				, nodes: createTree()
			});

		});


	</script>

	<pre class="layui-code">
		# layui.tree-v2 备忘
		* check参数 - checkbox、radio的支持
		* 拖拽的支持
		</pre>

</body>

</html>